<template>
	<view class="w-audio-gif" :style="{transform: `scale(${scale})`}">
		<view 
			class="line" 
			:style="{
				'--height': item[0] + '%', 
				animationDuration: item[1] + 's', 
				animationDelay: item[2] + 's',
				animationPlayState: paused ? 'paused' : 'running'
			}" 
			v-for="(item, index) in arr" 
			:key="index"
		></view>
	</view>
</template>

<script>
	export default {
		props: {
			scale: {
				type: [String, Number],
				default: 1
			},
			paused: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				arr: [
					[12, 1, 0],
					[4, 1, 0.5],
					[28, 1, 0.2],
					[16, 1, 0],
					[40, 2, 0.1],
					[28, 2, 0.5],
					[48, 2, 0],
					[4, 2, 0.4],
					[40, 2, 0.1],
					[10, 2, 0.2],
					[22, 2, 0.1]
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.w-audio-gif {
		display: flex;
		align-items: center;
		height: 80rpx;
		.line {
			width: 5rpx;
			height: var(--height);
			background-color: #FFFFFF;
			margin: 0 5rpx;
			animation-name: move;
			animation-iteration-count: infinite;
			@keyframes move {
				0% {height: var(--height)}
				50% {height: 0}
				100% {height: var(--height)}
			}
		}
	}
</style>
